<script setup lang='ts'>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { useRouter } from "vue-router";
import { alipay } from "@/api/api";
import { ElMessage } from 'element-plus'
import mitter from "../../utils/mitt";
const router = useRouter()
const activeIndex = ref<string>('1')
const mail = ref()
onMounted(() => {
  mail.value = localStorage.getItem('mail')
  mitter.on('thisId', (value: any) => {
    activeIndex.value = value.key
  })
})
onBeforeUnmount(() => {
  mitter.off('thisId')
})
const handleSelect = (key: string) => {
  switch (key) {
    case '1':
      router.push({ name: 'home' })
      break;
    case '2':
      router.push({ name: 'Task', query: { id: key } })
      break;
    case '3':
      router.push({ name: 'TaskData', query: { id: key } })
      break;
    case '4':
      router.push({ name: 'account', query: { id: key } })
      break;
  }
}
const sendData = async () => {
  const timestamp = Date.now().toString();
  const res = await alipay({id:timestamp,mail:mail.value})  
  if (res.data.code === '404') {
    ElMessage({
      type: 'error',
      message: '请先登录账户',
    })
    localStorage.setItem('mail','')
    localStorage.setItem('token','')
    return
  }else if(res.data.code === '304'){
    ElMessage({
      type: 'success',
      message: '该账号已是会员',
    })
    return
  }
  window.location.href = res.data.data
}
</script>

<template>
  <div class="content">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
      @select="handleSelect">
      <el-menu-item>
        <img style="width: 50px" src="../../../public/vite.svg" alt="Element logo" />
      </el-menu-item>
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">业务预览</el-menu-item>
      <el-menu-item index="3">任务大厅</el-menu-item>
      <el-menu-item index="4">账号交易</el-menu-item>
      <el-menu-item @click="sendData">开通会员</el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
@import url(../../assets/style/header.css);
</style>